<template>
  <ChatLayout>
    <template #aside="layout">
      <HistoryList></HistoryList>
    </template>
    <template #default>
      <NavbarTop/>
      <ChatProcess v-if="chatStatusStore.startChat"/>
      <Welcome v-else/>
      <div class="new-convo-button">
        <div class="agent-knowledge">
          <ChatModel/>
          <ChatSetting/>
          <span class="agent-knowledge-dividing-line"></span>
          <Knowledge/>
        </div>
        <d-popover
          :content="$t('newChat')"
          trigger="hover"
          :position="['top']"
          style="color: var(--devui-text)"
        >
          <div class="new-chat-setting" @click="onNewConvo">
            <i class="icon-add"></i>
          </div>
        </d-popover>
      </div>
      <Input/>
    </template>
  </ChatLayout>
</template>

<script setup lang="ts">
import {
  useChatHistoryStore,
  useChatMessageStore,
  useChatStatusStore,
} from '@/store'
import { ChatModel } from '@view/chat-model'
import { ChatProcess } from '@view/chat-process'
import { ChatSetting } from '@view/chat-setting'
import { Input } from '@view/input'
import { Knowledge } from '@view/knowledge'
import { Welcome } from '@view/welcome'
import NavbarTop from './navbar-top.vue'
import { HistoryList } from '@view/history'
import ChatLayout from '@/layout/chat-layout.vue'

const chatHistoryStore = useChatHistoryStore()
const chatMessageStore = useChatMessageStore()
const chatStatusStore = useChatStatusStore()

const onNewConvo = () => {
  chatHistoryStore.setActiveHistoryId('')
  chatStatusStore.startChat = false
  chatMessageStore.messages = []
}
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.new-convo-button {
  padding: 0 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 39px;
  gap: 4px;
}

.agent-knowledge {
  flex: 1;
  display: flex;
  align-items: center;

  .agent-knowledge-dividing-line {
    width: 1px;
    height: 14px;
    margin: 0 12px;
    background-color: $devui-line;
  }
}

.new-chat-setting {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: $devui-border-radius-full;
  background-color: $devui-base-bg;
  box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
  cursor: pointer;

  &:hover {
    color: $devui-brand;
  }
}

.toggle-wrapper {
  position: absolute;
  z-index: 10;
  top: calc(50% - 20px);
  left: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 40px;
  border-radius: 6px;
  box-shadow: 2px 0px 4px 0px var(--mc-float-block-shadow);
  background: $devui-base-bg;
  transition: all 0.3s ease-in-out;
  cursor: pointer;

  svg {
    transition: transform 0.3s ease-in-out;
  }

  &.not-expand {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    svg {
      transform: rotate(180deg);
    }
  }
}

@media screen and (max-width: 940px) {
  .navbar-container {
    display: none;
  }
}
</style>
